<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <title>My Domain Timeline View</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel='stylesheet' href='styles.css' type='text/css' />
    
	<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>
	<script>
	var tl;
	
   Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
		//alert (evt.getProperty("title"));
		//alert (evt.getDescription());
		//alert (evt.getLink());

		document.location.href=evt.getLink();

        /*
        if(!win){
            win = new Ext.Window({
                applyTo     : 'hello-win',
                layout      : 'fit',
                width       : 500,
                height      : 300,
                closeAction :'hide',
                plain       : true,
                items       : //[{
                    //title:evt.getProperty("title"),
                    //html:'<img src="'+evt.getLink()+'"/>',
                    //width:800,
                    //anchor:'right 20%'
                    //}] 
                 new Ext.TabPanel({
                    applyTo        : 'hello-tabs',
                    autoTabs       : true,
                    activeTab      : 0,
                    deferredRender : false,
                    border         : false
                }),
                buttons: [{
                    text     : 'Submit',
                    disabled : true
                },{
                    text     : 'Close',
                    handler  : function(){
                        win.hide();
                    }
                }]
            });
        }

        win.show();
        */

        win.show();
    };	
	
	function onLoad() {
	   var eventSource = new Timeline.DefaultEventSource();
	   var bandInfos = [
	     Timeline.createBandInfo({
	         eventSource:    eventSource,					// event source
	         //date:           "Jun 28 2006 00:00:00 GMT",	// timeline immediately scrolls to this date, else the default is NOW()
	         width:          "70%", 						// width of 1st band
	         intervalUnit:   Timeline.DateTime.MONTH, 		// time unit
	         intervalPixels: 100							// pixels of band
	     }),
	     Timeline.createBandInfo({
	         eventSource:    eventSource,
	         //date:           "Jun 28 2006 00:00:00 GMT",
	         width:          "30%", 
	         intervalUnit:   Timeline.DateTime.YEAR, 
	         intervalPixels: 200,
			 overview: true
	     })
	   ];
	   bandInfos[1].syncWith = 0;							// synchronizes the bands
	   bandInfos[1].highlight = true;						// highlights the band

	   tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
	   Timeline.loadJSON("./MyDomain_timeline.js", function(data, url) { eventSource.loadJSON(data, url); });
	 }

	 var resizeTimerID = null;
	 function onResize() {
	     if (resizeTimerID == null) {
	         resizeTimerID = window.setTimeout(function() {
	             resizeTimerID = null;
	             tl.layout();
	         }, 500);
	     }
	 }

	</script>

	<title></title>
</head>

<body onload="onLoad();" onresize="onResize();">
	<h1>My Domain Timeline View</h1>
	<h5>You are at:<a href="index.html">Home</a>/<a href="MyDomain_timeline.html">Timeline View</a></h5>

    <div id="content">
        
    	<h2>My Domain Timeline view</h2>
    	<p>Timeline view of nodes</p>
        
	</div>

	<div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div><noscript>This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.</noscript>
</body>
</html>
